<template>
	<div id="wellcome">
		<div v-if="loading">

			<div style="height:50vw;">
				<mt-swipe :auto="4000">
					<mt-swipe-item v-for="item in film"><img :src="item.cover.origin" style="width: 100%;" /></mt-swipe-item>
				</mt-swipe>
			</div>

			<div class="movie" v-for="item in film" @click="dianji(item.id)">
				<div class="movie_img">
					<img :src="item.cover.origin" />
				</div>
				<div class="movie_title">
					<div class="p_title_left">
						<span>{{item.name}}</span>
						<p>{{item.intro}}</p>
					</div>
					<div class="p_title_right">{{item.grade}}</div>
				</div>
			</div>
			<div class="movie" v-for="item in film" @click="dianji(item.id)">
				<div class="movie_img">
					<img :src="item.cover.origin" />
				</div>
				<div class="movie_title">
					<div class="p_title_left">
						<span>{{item.name}}</span>
						<p>{{item.intro}}</p>
					</div>
					<div class="p_title_right">{{item.grade}}</div>
				</div>
			</div>
		</div>
		<div v-if="!loading" class="loading">
			加载中。。。。
		</div>
		<!--切换页面：路由跳转 和<component is="xxx"></component> 的作用域-->

		<!--<br />
		<ul>
			<li v-for="m i menu" @click="location(m.path)">{{m.name}}</li>
		</ul>-->

		<!--路由 和<a></a>的作用类似-->
		<!--<router-link to="/wel">选项卡1</router-link>
		<router-link to="/second">选项卡2</router-link>
		<router-link to="/secondaaa">选项卡3</router-link>-->
	</div>

</template>

<script>
	import axios from "axios";

	export default {
		mounted: function() {

			//保存this的指向保证是当前的vue对象
			var self = this;
			//当index被引入的时候渲染时开始发起请求
			axios({
				url: "https://m.maizuo.com/v4/api/film/now-playing",
				methods: "get",
				data: {
					count: 10,
					page: 2,
				},
			}).then(function(res) {
				//成功回调
				self.loading = true;
				console.log(res);
				self.film = res.data.data.films;
				self.Pages = res.data.data.page;

			}).then(function(err) {
				//失败回调
				console.warn(err);
			});
		},
		data: function() {
			return {
				loading: false,
				film: [],
				Pages: {},
			}
			
		},
		methods:{
			//点击事件方法
			dianji:function(id) {	
				console.log("我接收到点击事件了")
				//console.log(this.$router.push)
				this.$router.push({
					path: "/details", //跳转路径
					query: {
						id: id,//传参
					}
				});
				//改变title的状态   $store.commit(自定义事件，传参)
				
			}	
		},
	}
</script>

<style lang="scss">
	/*lang="scss":识别成scss*/
	/*引入其他scss文件*/
	
	@import "../scss/wel.scss";
</style>